<!DOCTYPE html>
<html>

<head>
  <title>BFC</title>
  <style type="text/css">
    .container {
      position: relative;
      overflow: hidden;
    }

    /* 容器浮动 */
    .left_container {
      float: left;
      width: 100%;

      height: 100px;
      margin-left: -100px;
      background-color: green;
    }
    /* 内容修正位置 */
    .left {
      margin-left: 100px;
    }

    .right {
      float: right;
      width: 100px;

      height: 200px;
      background-color: blue;
      line-height: 100px;
      text-align: center;
    }
  </style>
</head>

<body style="margin:0;">
  <div class="container">
    <div class="left_container">
      <div class="left">I am left</div>
    </div>
    <div class="right">I am right</div>
  </div>
  <div style="height: 100px; background-color: red;">
  </div>
</body>

</html>